<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1600" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="活动分类" prop="category_id">
						<blCategory style="width: 400px;" v-model="form.category_id" model="ActivityV2" />
					</el-form-item>
					<el-form-item label="活动类型" prop="activity_type">
						<el-radio-group @change="activityTypeChange" style="width: 400px;" v-model="form.activity_type">
							<el-radio-button label="系统活动">系统活动</el-radio-button>
							<el-radio-button label="站内跳转">站内跳转</el-radio-button>
							<el-radio-button label="站外跳转">站外跳转</el-radio-button>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="跳转设置" prop="activity_extra" v-if="form.activity_type=='站内跳转'">
						<el-input v-if="form.activity_extra" type="text" style="width: 400px;"
							v-model="form.activity_extra.options.url" placeholder="请输入">
							<template #prepend>
								<el-select v-model="form.activity_extra.action" placeholder="动作" style="width: 135px;">
									<el-option label="navigateTo" value="navigateTo" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>

					<el-form-item label="活动名称" prop="activity_title">
						<div style="display: flex;flex-direction: column;gap: 5px;">
							<el-input placeholder="活动名称" v-model="form.activity_title" style="width: 400px;"></el-input>
							<el-input placeholder="副标题" v-model="form.activity_sub_title"
								style="width: 400px;"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="活动起止" prop="activity_starts_at">
						<div style="width: 455px;">
							<blDatePicker v-model:starts_at="form.activity_starts_at"
								v-model:ends_at="form.activity_ends_at" />
						</div>
					</el-form-item>

					<el-form-item label="活动简介" prop="activity_description">
						<el-input type="textarea" style="width: 400px;" v-model="form.activity_description"
							:autosize="{minRows: 1}" clearable placeholder="前台显示" show-word-limit
							maxlength="200"></el-input>
					</el-form-item>

					<el-form-item label="活动备注" prop="activity_remark">
						<el-input type="textarea" style="width: 400px;" v-model="form.activity_remark"
							:autosize="{minRows: 1}" clearable placeholder="备注不在前台显示" show-word-limit
							maxlength="150"></el-input>
					</el-form-item>

					<el-form-item label="封面海报" prop="activity_image">
						<sc-oss-upload v-model="form.activity_image" accept="image/jpg,image/png,image/jpeg"
							:width="220">
							<div class="custom-empty">
								<el-icon><el-icon-upload /></el-icon>
								<p>活动封面 750x600</p>
							</div>
						</sc-oss-upload>
						<div style="width:15px">
							&nbsp;
						</div>
						<sc-oss-upload v-model="form.activity_share_poster" accept="image/jpg,image/png,image/jpeg"
							:width="220">
							<div class="custom-empty">
								<el-icon><el-icon-upload /></el-icon>
								<p>分享海报 750x600</p>
							</div>
						</sc-oss-upload>
					</el-form-item>



					<el-form-item label="功能接口" prop="activity_tags" v-if="false">
						<ta-tag-plus v-model="form.activity_api" style="width: 700px;">

						</ta-tag-plus>
					</el-form-item>


					<template v-if="form.activity_type == '系统活动'">

						<el-form-item label="权益支付" prop="activity_payment_method">
							<el-radio-group style="width: 400px;" v-model="form.activity_payment_method">
								<el-radio-button label="活动金">活动金</el-radio-button>
								<el-radio-button label="积分">宏脉积分</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="权益扩展" prop="activity_payment_extra">
							<el-cascader :show-all-levels="true" filterable clearable
								style="margin-right: 10px;width:400px;" v-model="form.activity_payment_extra" :options="[{
								label:'柏乐宏脉',
								children:[
									{
										label:'老介新累消50权益',
										value:'hm_invite_visit_50'
									}
								]
							}]" :props="{
								multiple:true,
										emitPath: false
									}">
							</el-cascader>
						</el-form-item>

						<el-form-item label="信息来源" prop="activity_source_id">
							<bl-source style="width: 400px;" v-model="form.activity_source_id"></bl-source>
						</el-form-item>

						<el-form-item label="目标客群" prop="activity_target_group">
							<el-radio-group style="width: 400px;" v-model="form.activity_target_group">
								<el-radio-button label="柏乐口腔官方平台">柏乐口腔官方平台</el-radio-button>
								<el-radio-button label="柏乐宏脉">柏乐宏脉</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="核销期限" prop="activity_writeoff_valid_value">
							<div style="width: 400px;">
								<template v-if="form.activity_writeoff_valid_type == 'fixed_date'">
									<blDatePicker v-model="form.activity_writeoff_valid_value" />
								</template>
								<template v-else-if="form.activity_writeoff_valid_type == 'dynamic_days'">
									<el-input type="number" placeholder="" v-model="form.activity_writeoff_valid_value">
										<template #append>
											天内核销
										</template>
									</el-input>
								</template>
								<el-radio-group @change="radioChange" v-model="form.activity_writeoff_valid_type">
									<el-radio-button label="no_limit">无期限</el-radio-button>
									<el-radio-button label="dynamic_days">x天内核销</el-radio-button>
									<el-radio-button label="fixed_date">固定时间</el-radio-button>
								</el-radio-group>
							</div>
						</el-form-item>

						<el-form-item label="活动任务" prop="tasks">

							<div style="display: flex;flex-direction: row; gap: 15px; flex-wrap: wrap; width: 100%;">
								<div style="display: flex;flex-direction: column;">
									<div class="image-container">
										<img @click="goPageEdit" style="cursor: pointer; width: 190px; max-height: 333px; object-fit: contain;
										" :src="form.activity_page_preview" v-if="form.activity_page_preview" />
									</div>
									<el-button @click="form.id && goPageEdit()" type="primary" style="margin-top: 5px;">
										{{form.id? '页 面 编 辑' : '先保存再编辑'}}
									</el-button>
								</div>

								<sc-form-table style="flex:1" ref="table" v-model="form.tasks"
									:addTemplate="addTemplate" drag-sort placeholder="暂无数据" hideAdd>

									<el-table-column class-name="custom-cell" prop="task_name" label="&nbsp;任务信息"
										width="370">
										<template #default="{ row }">
											<el-descriptions label-width="64px" label-align="center" :column="1" border
												size="small">
												<el-descriptions-item label="任务编号">
													<span
														style="background: #e1e1e1;border-radius: 4px;padding: 2px 8px;">
														#{{ row.task_code }}
													</span>
												</el-descriptions-item>
												<el-descriptions-item label="任务标题">
													<span style="color: #409eff;">{{ row.task_name }}</span>
												</el-descriptions-item>
												<el-descriptions-item label="任务类型">
													<span style="color: #67c23a;">{{ row.task_type }}</span>
												</el-descriptions-item>
												<el-descriptions-item label="前置任务"
													v-if="row.task_code !== 'ACTIVITY_JOIN'">
													<el-select v-model="row.task_pre_id" placeholder="请选择">
														<el-option label="视频活动" value="天"></el-option>
													</el-select>
												</el-descriptions-item>
											</el-descriptions>
										</template>
									</el-table-column>

									<el-table-column class-name="custom-cell" prop="task_api" label="&nbsp;接口/功能/绑定"
										width="730">
										<template #default="{ row }">
											<ta-tag-plus v-model="row.task_api" style="width: 700px;">

											</ta-tag-plus>
										</template>
									</el-table-column>
								</sc-form-table>

								<el-alert :title="`活动任务: 请在活动页面里添加 和 基础配置`" type="success"
									style="width: 100%; margin-bottom:0px;"></el-alert>
							</div>
						</el-form-item>


					</template>

					<el-form-item label="列表隐藏" prop="activity_hide_in_list">
						<el-radio-group style="width: 400px;" v-model="form.activity_hide_in_list">
							<el-radio-button :label="false">显示</el-radio-button>
							<el-radio-button :label="true">隐藏</el-radio-button>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="线上版本" prop="activity_is_debug">
						<el-radio-group style="width: 400px;" v-model="form.activity_is_debug">
							<el-radio-button :label="false">正式版</el-radio-button>
							<el-radio-button :label="true">体验版</el-radio-button>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="允许分享" prop="activity_allow_share">
						<el-radio-group style="width: 400px;" v-model="form.activity_allow_share">
							<el-radio-button :label="true">允许</el-radio-button>
							<el-radio-button :label="false">禁止</el-radio-button>
						</el-radio-group>
					</el-form-item>


					<el-form-item label="推荐指数" prop="activity_recommend_pos">
						<el-input type="number" style="width: 400px;" v-model="form.activity_recommend_pos"></el-input>
					</el-form-item>

					<el-form-item label="活动详情">
						<sc-editor v-model="form.activity_details" placeholder="请输入" :height="400"></sc-editor>
					</el-form-item>

				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	import {
		defineAsyncComponent
	} from 'vue';
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));

	export default {
		emits: ['success', 'closed'],
		components: {
			scEditor
		},
		data() {
			return {
				loading: false,
				mode: "add",
				titleMap: {
					add: '创建账单',
					edit: '查看明细'
				},
				form: {
					id: '',
					activity_share_poster: null,
					activity_title: null,
					activity_extra: null,
					activity_source_id: null,
					activity_description: null,
					activity_sub_title: null,
					activity_image: null,
					activity_is_debug: true,
					activity_writeoff_valid_type: 'no_limit',
					activity_writeoff_valid_value: null,
					activity_details: null,
					activity_type: '系统活动',
					activity_page_preview: null,
					activity_starts_at: null,
					activity_recommend_pos: null,
					activity_ends_at: null,
					activity_remark: null,
					activity_payment_method: '活动金',
					activity_payment_extra: [],
					activity_hide_in_list: false,
					activity_allow_share: true,
					activity_target_group: '柏乐口腔官方平台',
					category_id: null
				},
				rules: {
					activity_title: [{
						required: true,
						message: '请填写活动名称'
					}],
					activity_starts_at: [{
						required: true,
						message: '请选择活动起止时间'
					}]
				},
				addTemplate: {
					task_name: "",
					task_api: null,
					task_pre_id: null
				},
				visible: false,
				isSaveing: false,
				apiObj: null,
			}
		},
		mounted() {

		},
		methods: {
			activityTypeChange(e) {
				if (e == '站内跳转' && this.form.activity_extra == null) {
					this.form.activity_extra = {
						action: 'navigateTo',
						options: {
							url: '',
						}
					};
				}
			},
			goPageEdit() {
				if (this.form.id) {
					this.$router.push(`/activityV2/pageEdit?id=${this.form.id}`)
				} else {
					this.$alert(
						"先保存再编辑", {
							type: 'error'
						},
					)
				}
			},
			radioChange(e) {
				switch (e) {
					case 'dynamic_days':
						this.form.activity_writeoff_valid_value = 0;
						break;
					case 'fixed_date':
						this.form.activity_writeoff_valid_value = [null, null];
						break;
					default:
						this.form.activity_writeoff_valid_value = null;
						break;
				}
			},
			success(res) {
				return true;
			},
			//显示
			open(data) {

				this.apiObj = this.$parent.apiObj

				if (data) {
					this.mode = data;
				}
				this.visible = true;
				this.$nextTick(() => {
					if (this.mode == 'add') {

						for (var i = 0; i < 1; i++) {
							this.$refs.table.rowAdd({
								task_name: "参加活动",
								task_code: "ACTIVITY_JOIN" + (i > 0 ? '1' : ''),
								task_order: 0,
								task_type: '系统默认'
							})
						}


					}
				})
				return this;
			},
			//表单提交方法
			submit() {

				this.$refs.ruleForm.validate(async (data) => {
					if (data) {
						var res;
						this.isSaveing = true;
						if (this.mode == 'add') {
							res = await this.apiObj.create.post(this.form);
						} else {
							res = await this.apiObj.update.post(this.form);
						}
						this.isSaveing = false;
						if (res.code == 0) {
							this.$emit('success', data, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						} else {
							this.$alert(res.message, "提示", {
								type: 'error'
							})
						}
					}
				})
			},
			//表单注入数据
			setData(data) {
				this.loading = true

				if (!data.id) {
					if (data.category_id) {
						this.form.category_id = data.category_id
					}
					this.loading = false
					return;
				}

				const params = {
					id: data.id
				}
				setTimeout(async () => {
					var res = await this.apiObj.show.get(params)

					this.loading = false
					this.form = res.data
				}, 0)
			}
		}
	}
</script>

<style>
	.custom-cell,
	.custom-cell>.cell {
		padding: 3px !important;

	}

	.custom-cell {
		/*vertical-align: top !important;*/
	}
</style>

<style scoped>
	.custom-empty {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #8c939d;
		border-radius: 5px;
	}

	.custom-empty i {
		font-size: 30px;
		color: #fff;
	}

	.custom-empty p {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
		margin-top: 10px;
	}

	.image-container {
		width: 211px;
		height: 434px;
		padding: 50px 10px 0px 10px;
		background-image: url('https://www.zxlee.cn/github/uni-z-paging/phone.png');
		background-size: 211px 434px;
	}
</style>
